<style>
	.image {
		width: 100%;
		display: block;
	}
</style>
<template>
	<div id="suggest_approve">
		<!--工具条-->
		<div name="searchColums">
			<el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
				<el-form-item class="el-form-item" label="报修人" prop="liftUserName">
					<el-input class="filter-item" placeholder="报修人姓名" v-model="filters.liftUserName"></el-input>
				</el-form-item>
				<el-form-item class="el-form-item" label="小区">
					<el-select size="small" v-model="filters.communityId" placeholder="请选择">
						<el-option v-for="item in communityOptions" :key="item.value" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="el-form-item" label="报修时间">
					<el-date-picker v-model="filters.startTimeBegin" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
				</el-form-item>
				<el-form-item class="el-form-item" label="至">
					<el-date-picker v-model="filters.startTimeEnd" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
				</el-form-item>
				<span class="bth_search">
          <el-form-item>
            <el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
          </el-form-item>
        </span>
			</el-form>
		</div>

		<!--列表-->
		<el-table :data="gridDatas" id="dataGrid" empty-text=" " border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="liftUserName" label="报修人姓名" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="communityName" label="所属小区" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="buildingName" label="楼宇" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="unitName" label="单元" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseName" label="房屋" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="startTime" label="报修时间" width="140" show-overflow-tooltip></el-table-column>
			<el-table-column prop="description" label="问题描述" show-overflow-tooltip></el-table-column>
			<el-table-column label="图片" width="100">
				<template slot-scope="scope">
					<el-button round @click="showImgPath('repair', scope.row)">查看
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="repairUserName" label="维修人员" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column prop="repairResult" label="维修结果" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column prop="resultImg" label="维修结果图片" width="140" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button round @click="showImgPath('repair_result', scope.row)">查看
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="operationDescription" label="维修描述" show-overflow-tooltip></el-table-column>
			<el-table-column prop="statusName" label="报修状态" width="80" show-overflow-tooltip></el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		<!--图片查看界面-->
		<el-dialog title="报修图片" :visible.sync="imgFormVisible" :close-on-click-modal="false">
			<el-row>
				<el-col v-for="(imgPath,index) in imgListShow" :key="index">
					<el-card :body-style="{ padding: '0px' }">
						<img :src="imgPath.data" class="image" />
					</el-card>

				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>
<script>
	import { getToken, setToken, removeToken, getFileIp } from '@/util/auth'
	import request from '@/router/axios'

	export default {
		name: 'suggestApprove',
		data() {
			return {
				communityOptions: [],
				//单元过滤条件
				filters: {
					liftUserName: '',
					communityId: '',
					startTimeBegin: '',
					startTimeEnd: ''
				},
				url: {
					//单元数据
					list: '/admin/repairRecord/page'
				},
				gridDatas: [],
				sort: {
					sort: 'sort',
					order: 'asc'
				},
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				sels: [],
				imgListShow: [],
				imgFormVisible: false
			}
		},
		methods: {
			//初始化数据字典
			initDictsData: function() {
				request.get("/admin/community?getCommunitysByCurrentUser").then((res) => {
					if(res.status === 200) {
						this.communityOptions = res.data;
					}
				});
			},
			handleSortChange(sort) {
				this.sort = {
					sort: sort.prop,
					order: sort.order == 'ascending' ? 'asc' : 'desc'
				}
				this.getDataGrid()
			},
			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex
			},
			headStyle({
				row,
				rowIndex
			}) {
				return 'table_head_style'
			},
			index_formatter: function(row, column, cellValue, index) {
				//放回索引值
				return this.pageSize * (this.page - 1) + 1 + index
			},
			handleCurrentChange(val) {
				this.page = val
				this.getDataGrid()
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.page = 1
				this.getDataGrid()
			},
			resetSearchForm(formName) {
				this.filters = {
					liftUserName: '',
					communityId: '',
					startTimeBegin: '',
					startTimeEnd: ''
				}
			},
			selsChange: function(sels) {
				this.sels = sels
			},
			//图片点击事件
			imgHandlePreview: function(file) {},

			showImgPath: function(type, row) {
				this.imgListShow = []
				let para = {
					id: row.id,
					type:type
				}
				request({
					url: '/admin/repairRecord/showImg',
					method: 'get',
					params: para
				}).then(res => {
					for(var i = 0; i < res.data.length; i++) {
						var img = {}
						img.id = res.data[i].id
						img.data = getFileIp() + res.data[i].data
						this.imgListShow.push(img)
					}
				})
				this.imgFormVisible = true
			},

			//获取单元列表数据
			getDataGrid(flag) {
				//获取当前树节点选中小区
				if(flag){
      				this.page = 1;
      			}
				let para = {
					params: {
						page: this.page,
						limit: this.pageSize,
						//排序
						orderByField: this.sort.sort,
						isAsc: this.sort.order,
						liftUserName: this.filters.liftUserName,
						communityId: this.filters.communityId,
						startTimeBegin: this.filters.startTimeBegin,
						startTimeEnd: this.filters.startTimeEnd
					}
				}
				this.listLoading = true
				request.get(this.url.list, para).then(res => {
					this.total = res.data.total
					var datas = res.data.records
					this.gridDatas = datas
					this.listLoading = false
				})
			}
		},
		mounted() {
			this.initDictsData();
			this.getDataGrid();
		}
	}
</script>